/*
 * @Description: 
 * @Version: 2.0
 * @Autor: jl.g
 * @Date: 2023-06-28 17:24:24
 * @LastEditors: jl.g
 * @LastEditTime: 2023-06-29 08:51:31
 */
import React, { useEffect, useState } from "react";
import { imagesSquareList } from "@/api/midjourney";
import { copyToClipboardFn } from "@/utils";
import { Image, Pagination, Button, Tooltip } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import styles from "./index.module.less";
const PictureSquare = () => {
  // 图片列表
  const [squareImgList, setSquareImgList] = useState([]);
  // 分页
  const [pagination, setPagination] = useState({
    total: 0,
    size: 8,
    current: 1,
  });

  // 获取广场数据
  const getImagesSquareList = async () => {
    try {
      let res = await imagesSquareList(pagination);
      if (res.code === 200) {
        // 设置总条数
        setPagination({
          ...pagination,
          total: res.result.total,
        });
        setSquareImgList(res.result.records || []);
      } else {
        setSquareImgList([]);
      }
    } catch (error) {
      console.log(error);
    }
  };

  // 分页变化
  const onPaginationChange = (page, pageSize) => {
    setPagination({
      ...pagination,
      size: pageSize,
      current: page,
    });
  };
  useEffect(() => {
    getImagesSquareList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagination.size, pagination.current]);

  useEffect(() => {
    getImagesSquareList();
     // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <div className={styles.pictureSquareWarp}>
      <div className="picture_square-content">
        {squareImgList.length
          ? squareImgList.map((itemData) => (
              <div key={itemData.fileId} className="square_content-item">
                <div className="prompt">
                  <div className="prompt_lable">{itemData.filePrompt}</div>
                  <Tooltip placement="topLeft" title={itemData.filePrompt}>
                    <Button
                      style={{ marginLeft: 5 }}
                      type="primary"
                      onClick={() =>
                        copyToClipboardFn(itemData.filePrompt, "复制成功")
                      }
                      className="mj-generate-tools_btn"
                      icon={<CopyOutlined />}
                      size="small"
                    >
                      复制咒语
                    </Button>
                  </Tooltip>
                </div>
                <Image height={320} src={itemData.cosUrl} alt="" />
              </div>
            ))
          : ""}
      </div>

      {pagination.total > 8 ? (
        <Pagination
          className="picture_square-content-pagination"
          pageSizeOptions={[8, 24, 48]}
          style={{ float: "right" }}
          onChange={onPaginationChange}
          current={pagination.current}
          pageSize={pagination.size}
          showSizeChanger
          total={pagination.total}
        ></Pagination>
      ) : (
        ""
      )}
    </div>
  );
};

export default PictureSquare;
